<template>
  <div>
    <van-nav-bar
      :title="title"
      left-text=""
      right-text="保存"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-form>
      <van-cell-group inset>
        <p class="tttype">抬头类型</p>
        <div class="tabs">
          <p
            v-for="(item, index) in tabs"
            :key="index"
            @click="changeInd(index)"
            :v-model="info.type"
            :value="info.type"
            :class="{ active: info.ind == index }"
          >
            {{ item }}
          </p>
        </div>
        <van-field
          v-model="info.name"
          name="name"
          label="抬头名称"
          placeholder="必填，公司名称"
          :rules="[{ required: true, message: '请填写抬头名称' }]"
        />
        <van-field
          v-if="info.ind != 2"
          v-model="info.duty"
          name="duty"
          label="税号"
          placeholder="纳税人识别号"
          :rules="[{ required: true, message: '请填写税号' }]"
        />
        <van-field
          v-model="info.email"
          name="email"
          label="邮箱"
          placeholder="请填写常用邮箱（选填）"
        />
        <div class="switch" v-if="info.ind != 2">
          <span>需要增值税专用发票</span>
          <van-switch v-model="info.voince" size="20px" />
        </div>
        <div class="switch">
          <span>设置为默认发票</span>
          <van-switch v-model="info.defaults" size="20px" />
        </div>
      </van-cell-group>
    </van-form>
    <van-button
      v-if="id != undefined"
      type="primary"
      size="large"
      @click="dellist"
      >删除发票抬头</van-button
    >
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { addRess, getdetail, updateRess, delRess } from "../../api/api";
import { showConfirmDialog, showDialog, showNotify } from "vant";

const router = useRouter();
const route = useRoute();

const id = route.query.id;

let title = ref("新增发票抬头");

// 抬头类型
const tabs = ref(["企业", "非企业性单位", "个人"]);

// 高亮下标
let ind = ref(0);

// 判断高亮
const active = ref(0);

// 表单数据
const info = ref({
  type: "企业",
  duty: "",
  email: "",
  name: "",
  defaults: true,
  voince: false,
  ind: 0,
});

if (id == undefined) {
  title = "新增发票抬头";
} else {
  title = "修改发票抬头";
  getdetail(id).then((res) => {
    if (res.data.data[0].type == "企业") {
      info.value = { ...res.data.data[0], ind: 0 };
    } else if (res.data.data[0].type == "非企业性单位") {
      info.value = { ...res.data.data[0], ind: 1 };
    } else if (res.data.data[0].type == "个人") {
      info.value = { ...res.data.data[0], ind: 2 };
    }
  });
}

// 点击抬头类型切换高亮
const changeInd = (index) => {
  info.value.ind = index;
  info.type = tabs.value[index];
};

// 点击左侧返回
const onClickLeft = () => {
  router.push("/");
};

// 点击删除执行的函数
const dellist = () => {
  showConfirmDialog({
    title: "提示",
    message: "确定要删除这一发票抬头吗？",
  })
    .then(() => {
      delRess(id).then((res) => {
        if (res.status == 200) {
          showNotify({ type: "success", message: "删除成功" });
          router.push("/");
        }
      });
    })
    .catch(() => {
      // on cancel
    });
};

// 点击右侧保存
const onClickRight = async () => {
  if (id == undefined) {
    // 非空判断
    if (info.name == "") {
      showDialog({
        title: "提示",
        message: "抬头名称不能为空！！！",
      }).then(() => {
        // on close
      });
    } else if (info.ind != 2 && info.duty == "") {
      showDialog({
        title: "提示",
        message: "税号不能为空！！！",
      }).then(() => {
        // on close
      });
    } else {
      await addRess({
        ...info.value,
        defaults: Number(info.value.defaults),
        voince: Number(info.value.voince),
      }).then((res) => {
        showDialog({
          title: "提示",
          message: "保存成功",
        }).then(() => {
          router.push("/");
        });
      });
    }
  } else {
    updateRess({
      id,
      ...info.value,
      defaults: Number(info.value.defaults),
      voince: Number(info.value.voince),
    }).then((res) => {
      showDialog({
        title: "提示",
        message: "修改成功",
      }).then(() => {
        router.push("/");
      });
    });
  }
};
</script>

<style scoped>
.van-button {
  width: 95%;
  margin-left: 10px;
  margin-top: 10px;
  background-color: white;
  color: #1989fa;
  /* border: 1px solid red; */
}
.tabs {
  display: flex;
}
.tabs > P {
  padding: 0 8px;
  box-sizing: border-box;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-right: 10px;
  font-size: 11px;
}
.tabs > .active {
  color: #41b7bb;
  border: 1px solid #41b7bb;
}
.tttype {
  float: left;
  font-size: 13.5px;
  margin-left: 15px;
  margin-right: 46px;
}
.switch {
  margin-top: 10px;
  height: 30px;
  margin-left: 17px;
  font-size: 13.5px;
  border-bottom: 1px solid #f3f3f3;
  letter-spacing: 1px;
}
.switch > .van-switch {
  float: right;
}
</style>